<template>
    <div class="component-verification-code" :class="{'sent': value}">
        <span class="component-verification-code__get button short pure" @click='emitClick' v-if='text'>{{text}}</span>
        <span class="component-verification-code__re-send">{{ reSend }}</span>
    </div>
</template>

<script>

    export default {
        props: {
            value: {
                type: Boolean,
                default:false
            },
            text:{
                type: String,
                default:'获取验证码'
            }
        },
        data() {
            return {
                secondDefault:60,
                second:60,
                reSend:'60秒后可重新发送',
            }
        },
        computed:{

        },
        methods:{
            emitClick(){
                if(this.value) return
                this.$emit('click')
            },
            countDown(){
                const time = setTimeout(()=>{
                    if(this.second == 0){
                        this.$emit('input',false)
                        this.second = this.secondDefault
                        this.reSend = `${this.second}秒后可重新发送`
                        return
                    }
                    if(this.value == false){
                        this.second = this.secondDefault
                        this.reSend = `${this.second}秒后可重新发送`
                        return
                    }
                    this.second --
                    this.reSend = `${this.second}秒后可重新发送`
                    this.countDown()
                },1000)
            },
        },
        created(){

        },
        watch: {
            'value'(newVal,oldVal){
                if(newVal == true){
                    this.countDown()
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";

    .component-verification-code{
        position: relative;
        height:48px;
        display: flex;
        align-items:center;
        justify-content: flex-end;
        &.sent{
            .component-verification-code__get{
                display: none;
            }
            .component-verification-code__re-send{
                display: block;
            }
        }
    }
    .component-verification-code__get.button{
        width: 130px;
        padding-right: 0;
        height:48px;
        line-height:48px;
        text-align: right;
    }
    .component-verification-code__re-send{
        width: 130px;
        @extend %font-button;
        display: none;
        color:$grayLight;
    }

</style>
